<template>
  <div class="container">
    <div class="row">
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
        <box box-title="今日新增" box-content="4,406" box-secondary-content="今日的新增订购人数"></box>
      </div>
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
        <box box-title="今日访问" box-content="10,392" box-secondary-content="今日的订购访问人数"></box>
      </div>
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
        <box box-title="订购总数" box-content="22,001" box-secondary-content="今日所有产品订购总数"></box>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <box box-title="最近30天的订购">
          <div slot="box-header-ext" class="w-box-header-ext w-box-header-btn-group">
            <datetime-picker></datetime-picker>
          </div>
          <bar-chart v-el:order-latest-chart :x-axis-label-rotation="-45" tooltip-label="当天订购" :chart-adapter="orderLatestAdapter"></bar-chart>
        </box>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
        <box box-title="渠道订购比例">
          <pie-chart v-el:flavor-pie-chart tooltip-label="总订购量" :chart-adapter="flavorAdapter"></pie-chart>
        </box>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
        <box box-title="产品订购比例">
          <pie-chart v-el:product-pie-chart tooltip-label="总订购量" :chart-adapter="productAdapter"></pie-chart>
        </box>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <box box-title="产品7日订购走势">
          <line-chart v-el:order-line-chart :chart-adapter="orderLineAdapter"></line-chart>
        </box>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <box box-title="各产品订购情况">
          <table-view v-el:order-table :table-adapter="orderAdapter"></table-view>
        </box>
      </div>
    </div>
  </div>
</template>

<script type="text/babel">
  import TableView from './widgets/TableView'
  import Pagination from './widgets/Pagination'
  import PieChart from './widgets/charts/PieChart'
  import LineChart from './widgets/charts/LineChart'
  import BarChart from './widgets/charts/BarChart'
  import Box from './widgets/Box'
  import DatetimePicker from './widgets/DatetimePicker'
  import moment from 'moment'

  var headers = ['产品', '今日', '昨日', '总共', '新增']
  var adapter = {
    sortedKeys: ['product', 'today', 'yesterday', 'total', 'increment'],
    header: (column, key) => headers[column],
    item: (row, column, item, key) => item[key],
    items: [],
    isSortableColumn: (column, key) => true,
    isClickableRow: (row) => true
  }

  var OrderLineAdapter = function () {
    var cates = []
    var now = moment()
    cates.push(now.format('MM/DD'))
    for (var i = 0; i < 6; i++) {
      cates.push(now.subtract(1, 'days').format('MM/DD'))
    }
    this._orderDataCategories = cates
    this._series = [
      {
        name: '汪汪吧',
        datas: [0, 0, 0, 0, 0, 0, 0]
      },
      {
        name: '玩吧',
        datas: [0, 0, 0, 0, 0, 0, 0]
      },
      {
        name: '蹦蹦跳',
        datas: [0, 0, 0, 0, 0, 0, 0]
      }
    ]
  }
  OrderLineAdapter.prototype.categories = function () {
    return this._orderDataCategories
  }
  OrderLineAdapter.prototype.seriesCount = function () {
    return this._series.length
  }
  OrderLineAdapter.prototype.seriesName = function (index) {
    return this._series[index].name
  }
  OrderLineAdapter.prototype.seriesDatas = function (index, name) {
    return this._series[index].datas
  }
  OrderLineAdapter.prototype.series = function () {
    this._series[0].datas = [1, 2, 18, 7, 6, 6, 7]
    this._series[1].datas = [1, 0, 2, 2, 9, 4, 3]
    this._series[2].datas = [0, 2, 3, 4, 5, 7, 10]
  }

  var ProductAdapter = function () {
    this._series = [
      {
        label: '玩吧',
        value: 438
      },
      {
        label: '汪汪吧',
        value: 220
      },
      {
        label: '玩吧蹦蹦跳',
        value: 632
      }
    ]
  }
  ProductAdapter.prototype.seriesDatas = function () {
    return this._series
  }

  var FlavorAdapter = function () {
    this._series = [
      {
        label: 'YunosTV',
        value: 10334
      },
      {
        label: 'Dangbei',
        value: 220
      },
      {
        label: 'Shafa',
        value: 632
      },
      {
        label: 'Xiaomi',
        value: 7701
      },
      {
        label: 'Letv',
        value: 38
      }
    ]
  }
  FlavorAdapter.prototype.seriesDatas = function () {
    return this._series
  }

  var OrderLatest30Adapter = function () {
    var d = []
    var now = moment()
    d.push({
      label: now.format('MM/DD'),
      value: 0
    })
    for (var i = 0; i < 29; i++) {
      d.push({
        label: now.subtract(1, 'days').format('MM/DD'),
        value: 0
      })
    }
    this._series = d
  }

  OrderLatest30Adapter.prototype.seriesDatas = function () {
    return this._series
  }

  OrderLatest30Adapter.prototype.test = function () {
    var len = this._series.length
    for (let i = 0; i < len; i++) {
      this._series[i].value = parseInt(Math.random() * 1000)
    }
  }

  export default {
    data: function () {
      return {
        orderAdapter: adapter,
        flavorAdapter: new FlavorAdapter(),
        productAdapter: new ProductAdapter(),
        orderLineAdapter: new OrderLineAdapter(),
        orderLatestAdapter: new OrderLatest30Adapter()
      }
    },
    components: {
      TableView,
      Pagination,
      PieChart,
      LineChart,
      BarChart,
      Box,
      DatetimePicker
    },
    ready: function () {
      var self = this
      setTimeout(function () {
        var arr = []
        arr.push({
          product: '汪汪吧',
          today: '5',
          yesterday: '3',
          total: '100',
          increment: '2'
        })
        adapter.items = arr

        setTimeout(function () {
          adapter.items.push({
            product: '蹦蹦跳',
            today: '7',
            yesterday: '3',
            total: '130',
            increment: '4'
          })

          self.orderLineAdapter.series()
          self.orderLineAdapter.notifyDatasetChanged()

          setTimeout(function () {
            adapter.items.push({
              product: '安徽玩吧',
              today: '16',
              yesterday: '13',
              total: '1049',
              increment: '3'
            })
          }, 1000)
        }, 1000)
      }, 1000)
    }
  }
</script>

<style>
  .w-box-header-btn-group {
    margin-top: 6px;
  }
</style>
